<template>
  <div class="book-management">
    <el-card class="header-card" shadow="hover">
      <h1 class="system-title">
        <i class="el-icon-notebook-2"></i> 图书管理系统
      </h1>
    </el-card>

    <!-- 添加图书的表单 -->
    <el-card class="form-card" shadow="hover">
      <el-form 
        :model="newBook" 
        label-width="100px" 
        label-position="top"
        class="book-form"
        @submit.native.prevent="addBook">
        <el-row :gutter="20">
          <el-col :md="12" :sm="24">
            <el-form-item label="书名" prop="title">
              <el-input 
                v-model="newBook.title" 
                placeholder="请输入书名"
                clearable>
                <i slot="prefix" class="el-icon-edit"></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="24">
            <el-form-item label="作者" prop="author">
              <el-input 
                v-model="newBook.author" 
                placeholder="请输入作者"
                clearable>
                <i slot="prefix" class="el-icon-user"></i>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :md="12" :sm="24">
            <el-form-item label="库存数量" prop="copies">
              <el-input-number 
                v-model="newBook.copies" 
                :min="1" 
                :max="100"
                controls-position="right"
                class="full-width">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :md="12" :sm="24" class="form-button-col">
            <el-form-item>
              <el-button 
                type="primary" 
                icon="el-icon-plus" 
                @click="addBook"
                class="submit-button">
                添加图书
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 图书表格 -->
    <el-card class="table-card" shadow="hover">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        stripe
        highlight-current-row
        :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
        class="book-table"
        empty-text="暂无图书数据">
        <el-table-column
          prop="id"
          label="ID"
          width="80"
          align="center"
          sortable>
        </el-table-column>
        <el-table-column
          prop="title"
          label="书名"
          min-width="180"
          sortable>
          <template slot-scope="scope">
            <span class="book-title">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          min-width="150"
          sortable>
          <template slot-scope="scope">
            <el-tag type="info">{{ scope.row.author }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="copies"
          label="库存"
          width="120"
          align="center"
          sortable>
          <template slot-scope="scope">
            <el-tag 
              :type="scope.row.copies > 3 ? 'success' : 'warning'"
              effect="dark">
              {{ scope.row.copies }}本
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
          align="center"
          fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {"id": 1, "title": "Python编程", "author": "John Doe", "copies": 4},
        {"id": 2, "title": "历史的秘密", "author": "Jane Smith", "copies": 3},
        {"id": 3, "title": "宇宙探索", "author": "Emily Brown", "copies": 2},
        {"id": 4, "title": "健康生活", "author": "Mike Johnson", "copies": 5},
        {"id": 5, "title": "数学之美", "author": "Sarah Lee", "copies": 4},
        {"id": 6, "title": "艺术欣赏", "author": "David White", "copies": 3},
        {"id": 7, "title": "编程入门", "author": "Alice Green", "copies": 2},
        {"id": 8, "title": "科幻世界", "author": "Frank Black", "copies": 5},
        {"id": 9, "title": "自然奇观", "author": "Grace Blue", "copies": 4},
        {"id": 10, "title": "音乐之声", "author": "Tom Red", "copies": 3}
      ],
      newBook: {
        title: '',
        author: '',
        copies: 1
      }
    }
  },
  methods: {
    addBook() {
      if (!this.newBook.title || !this.newBook.author) {
        this.$message.error('请填写书名和作者');
        return;
      }
      
      const newId = this.tableData.length > 0 
        ? Math.max(...this.tableData.map(book => book.id)) + 1 
        : 1;
      
      this.tableData.push({
        id: newId,
        title: this.newBook.title,
        author: this.newBook.author,
        copies: this.newBook.copies
      });
      
      // 重置表单
      this.newBook = {
        title: '',
        author: '',
        copies: 1
      };
      
      this.$message.success('图书添加成功');
    },
    handleDelete(index, row) {
      this.$confirm(`确定要删除《${row.title}》吗?`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        customClass: 'delete-confirm'
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!',
          customClass: 'delete-message'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          customClass: 'cancel-message'
        });          
      });
    }
  }
}
</script>

<style scoped>
.book-management {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: none;
}

.system-title {
  color: #409EFF;
  text-align: center;
  font-size: 24px;
  margin: 10px 0;
}

.system-title i {
  margin-right: 10px;
}

.form-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: none;
}

.book-form {
  padding: 15px;
}

.full-width {
  width: 100%;
}

.form-button-col {
  display: flex;
  align-items: flex-end;
}

.submit-button {
  width: 100%;
  height: 40px;
  font-size: 16px;
}

.table-card {
  border-radius: 8px;
  border: none;
}

.book-table {
  margin-top: 10px;
}

.book-title {
  font-weight: 500;
  color: #303133;
}

/* 动画效果 */
.el-table__row {
  transition: all 0.3s;
}

.el-table__row:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .book-management {
    padding: 10px;
  }
  
  .system-title {
    font-size: 20px;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
}
</style>

<style>
/* 全局样式覆盖 */
.delete-confirm .el-message-box__content {
  padding: 20px;
}

.delete-message.el-message--success,
.cancel-message.el-message--info {
  border-radius: 8px;
  padding: 15px 20px;
}

.el-table th > .cell {
  font-weight: bold;
}

.el-tag {
  font-size: 14px;
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
}
</style>